<html>
 <head> 
<style>
 .box{
     width: 200px;
     height: 200px;
     margin:200px auto;
     position: relative;
     transform-style: preserve-3d;
 }
 .box:hover{
  animation:rotate 3s linear infinite;
 }
.box>div{
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
}
 .font{
   background-color: red;
   transform: translateZ(100px);
 }
 .back{
   background-color:black;
   transform: translateZ(-100px);
 }
 .top{
   background-color:lavender;
   transform: translateY(-100px) rotateX(90deg);
 }
 .bottom{
   background-color:chartreuse;
   transform: translateY(100px) rotateX(-90deg);
 }
 .left{
   background-color:darkcyan;
   transform:translateX(-100px) rotateY(-90deg);
  
 }
 .right{
   background-color:deeppink;
   transform:translateX(100px) rotateY(90deg);
 }
 
 @keyframes rotate{
0%{
transform:rotateX(0deg) rotateY(0deg);
}

100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
  <div class="box">
  <div class="font"> <img
    src="https://pic1.zhimg.com/v2-04ce55cb61d19cd1770ad1ba9802e161_im.jpg "
    width="200"
    height="200"
  /></div>
  <div class="back"> <img
    src="https://pic1.zhimg.com/v2-04ce55cb61d19cd1770ad1ba9802e161_im.jpg "
    width="200"
    height="200"
  /></div>
  <div class="top"> <img
    src="https://pic1.zhimg.com/v2-04ce55cb61d19cd1770ad1ba9802e161_im.jpg "
    width="200"
    height="200"
  /></div>
  <div class="bottom"> <img
    src="https://pic1.zhimg.com/v2-04ce55cb61d19cd1770ad1ba9802e161_im.jpg "
    width="200"
    height="200"
  /></div>
  <div class="left"> <img
    src="https://pic1.zhimg.com/v2-04ce55cb61d19cd1770ad1ba9802e161_im.jpg "
    width="200"
    height="200"
  /></div>
  <div class="right"> <img
    src="https://pic1.zhimg.com/v2-04ce55cb61d19cd1770ad1ba9802e161_im.jpg "
    width="200"
    height="200"
  /></div>
  </div>
</body>
</html>